
/* ===============================================
Date : 2013-10-01 ~ 2014-10-30
Description : UI 관련 스크립트 함수 정의(탭,레이어,네비게이션,배너 등)
=============================================== */


var bsUI = {}

$.extend(bsUI, (function(){
	var _Class = {

		/* ==================================================================
			레이어팝업
		================================================================== */
		layerPop : function(id,w,event){ //레이어id, 클래스, 레이어 가로값
			var _thisElement; //레이어 띄우는 요소 저장 변수
			var _obj = $(id);

			_obj.find('.layerpop').css({
				width : w+'px',
				marginLeft : -(w/2)+'px'
			});
			_obj.fadeIn('fast');
			_obj.find('.layer-header').find('.layer-close').focus();

			if(event){
				if(!event) event = window.event; //for firefox
				_thisElement = (event.target) ? event.target : event.srcElement;
			}

			layerResize(id); //레이어 컨텐츠 길이에 따라 높이 조절

			_obj.find('.js-layer-close').on('click',function(){
				$(this).parents('.layerpop-wrap').fadeOut('fast');
				if(event){
					_thisElement.focus(); //레이어띄운 요소에 포커스
				}
			});

			/* 레이어 컨텐츠 높이에 따라 리사이징 */
			function layerResize(id){
				var _obj = $(id);
				var titH = _obj.find('.layer-header').outerHeight(); //레이어 헤더 높이
				var conH = _obj.find('.layer-body').outerHeight(); //레이어 컨텐츠 높이
				var bottomH = _obj.find('.layer-bottom').outerHeight(); //레이어 컨텐츠 높이
				var screenH = $(window).height(); //스크린 높이
				var gap = 2*30; //레이어 상하 마진의 합

				if(conH > screenH - titH - bottomH){ //레이어 컨텐츠가 스크린보다 길면
					_obj.find('.layer-inner').css({
						height : (screenH - titH - bottomH - gap)+'px',
						overflow : 'auto'
					});
					_obj.find('.layerpop').css('margin-top',-((screenH - gap)/2)+'px');
				}else{
					_obj.find('.layer-inner').css({
						height : conH+'px'
					});
					_obj.find('.layerpop').css('margin-top',-((conH + titH + bottomH)/2)+'px');
				}
			}
			$(window).resize(function(){layerResize(id);}) //윈도우 창 리사이즈 할 때마다 함수 호출
		},

		/* ==================================================================
			탭
		================================================================== */
		tab : function(){
			// 탭과 컨텐츠 구조 따로
			$('.js-tabA').each(function(n){
				var _this = $(this);
				_this.find('a.js-tab').each(function(n){
					$(this).parents('li').removeClass('on');
					$($(this).attr('href')).hide();
					if(n==0){
						$(this).parents('li').addClass('on');
						$($(this).attr('href')).show();
					}
					$(this).on('click', function(){
						_this.find('a.js-tab').each(function(n){
							$(this).parents('li').removeClass('on');
							$($(this).attr('href')).hide();
						});
						$(this).parents('li').addClass('on');
						$($(this).attr('href')).show();
						return false;
					});
				});
			});

			// 탭과 컨텐츠 논리적 구조
			$('.js-tabB').each(function(n){
				var _this = $(this);
				_this.find('a.js-tab').each(function(n){
					$(this).parents('li').removeClass('on');
					$(this).next('.con').hide();
					if(n==0){
						$(this).parents('li').addClass('on');
						$(this).next('.con').show();
					}
					$(this).on('click', function(){
						_this.find('a.js-tab').each(function(n){
							$(this).parents('li').removeClass('on');
							$(this).next('.con').hide();
						});
						$(this).parents('li').addClass('on');
						$(this).next('.con').show();
					});
				});
			});
			
			// 탭과 컨텐츠 구조 따로
			$('.js-tabC').each(function(n){
				var _this = $(this);
				_this.find('a.js-tab').each(function(n){
					$(this).parents('li').removeClass('on');
					if(n==0){
						$(this).parents('li').addClass('on');
					}
					$(this).on('click', function(){
						_this.find('a.js-tab').each(function(n){
							$(this).parents('li').removeClass('on');
						});
						$(this).parents('li').addClass('on');
						return false;
					});
				});
			});
		},

		/* ==================================================================
			아코디언
		================================================================== */
		accordion : function(){
			$('.js-accordion').each(function(n){
				var _this = $(this);

				_this.find('.js-accordion-header').each(function(n){
					$(this).on('click', function(){
						_this.find('.js-accordion-header').each(function(n){
							$(this).next().hide();
						});
						$(this).next().show();
					});
				});
			});
		},

		/* ==================================================================
			롤링배너 (배너 2개이상 노출 롤링시 사용)
		================================================================== */
		banner : function(target,max){
			var liLength = $("li",target).length;
			var liWidth = $("li",target).width();
			var ul = $(".js-banner-wrap",target);
			var maxWidth = max * liWidth;
			var ulWidth = liLength * liWidth;
			var prev = $(".js-ctr.js-prev",target);
			var next = $(".js-ctr.js-next",target);
			var input = $("input:hidden",target);
			$(".js-banner-inner",target).width(maxWidth);
			$(".js-banner-wrap",target).width(ulWidth);
			if (liLength > max){
				$(next).addClass("on").attr("status",liLength+2);
			}
			var nextGo = function(){
				var value = $(input).val() * 1;
				if ((max-liLength) != value) {
					$(input).val(value - 1);
					$(prev).addClass("on").attr("status",-1);
					$(ul).stop(true,true).animate({"left":"-="+liWidth},200);
				}
				if ((max-liLength+1) == value) {
					$(".js-ctr.js-next.on",target).removeClass("on").removeAttr("status");
				}
			};
			var prevGo = function(){
				var value = $(input).val() * 1;
				if (value < 0) {
					$(input).val(value + 1);
					$(next).addClass("on").attr("status",liLength+2);
					$(ul).stop(true,true).animate({"left":"+="+liWidth},200);
				}
				if (value == -1){
					$(".js-ctr.js-prev.on",target).removeClass("on").removeAttr("status");
				}
			};

			//탭이동시 이벤트
			var nowVar, newVar;
			if(max != 1 && liLength > max){
				$("li a",target).each(function(n){
					$(this).attr("status",n+1);
				});
				$("a",target).blur(function(){
					nowVar = ($(this).attr("status"));
				});
				$("li a",target).focus(function(){
					newVar = ($(this).attr("status"));
					if((nowVar-newVar) == -1){
						nextGo();
					}else if((nowVar-newVar) == 1){
						prevGo();
					}else if((nowVar-newVar) == -2){
						for(i=0; i<liLength; i++){prevGo();}
					}else if((nowVar-newVar) == 2){
						for(i=0; i<liLength; i++){nextGo();}
					}
				});
			}

			//버튼클릭함수 실행(최초1회 실행)
			this.btnClickEvent = function(){
				$(".js-ctr.js-next",target).on("click",function(){nextGo();});
				$(".js-ctr.js-prev",target).on("click",function(){prevGo();});
				$(".js-ctr:not('on')").on("click",function(){return false;});
			};
		},

		
		/* ==================================================================
			탭 배너 함수 (배너 1개 노출시 사용)
		================================================================== */
		bannerTabFunc : function(){
			var target = $('.js-banner-tab');

			target.each(function(n){
				var cmm = 0; //배너갯수에 따른 변수
				var timerID; //타이머 함수 담을 변수
				var bannerRolling = false; //재생.정지 구분 변수(기본 정지)
				var _this = $(this).find('li');
				_this.each(function(n){
					$(this).find('h5').removeClass('on');
					$(this).find('div.js-banner-con').css('z-index',0);
					if(n == 0){
						$(this).find('h5').addClass('on');
						$(this).find('div.js-banner-con').css('z-index',1);
					}
					$(this).find('h5').mouseover(function(){
						_this.each(function(n){
							$(this).find('h5').removeClass('on');
							$(this).find('div.js-banner-con').css('z-index',0);
						});
						$(this).addClass('on');
						$(this).next('div.js-banner-con').css('z-index',1);
						cmm = n;
					});
					$(this).find('.js-banner-con a').focus(function(){
						_this.each(function(n){
							$(this).find('h5').removeClass('on');
							$(this).find('div.js-banner-con').css('z-index',0);
						});
						$(this).parent('div.js-banner-con').prev('h5').addClass('on');
						$(this).parent('div.js-banner-con').css('z-index',1);
						cmm = n;
					});
				});
				
				//재생버튼 함수
				$(this).find('.control-btns .play').click(function(){
					bannerRolling = true;
					timerID = setInterval(function(){bannerTabStartRooling();},3000);
					$(this).hide();
					$(this).parents('.control-btns').find('.stop').show().focus();
				})
				//정지버튼 함수
				$(this).find('.control-btns .stop').click(function(){
					bannerRolling = false;
					clearInterval(timerID);
					$(this).hide();
					$(this).parents('.control-btns').find('.play').show().focus();
				})
				//이전버튼 함수
				$(this).find('.control-btns .prev').click(function(){
					$(this).parents('.control-btns').find('.play').show();
					$(this).parents('.control-btns').find('.stop').hide();
					bannerRolling = false;
					clearInterval(timerID);

					cmm--;
					if(cmm < '0'){
						cmm = '2';
					}
					console.log(cmm);
					_this.eq(cmm).find('h5').trigger('mouseover');
				})
				//다음버튼 함수
				$(this).find('.control-btns .next').click(function(){
					$(this).parents('.control-btns').find('.play').show();
					$(this).parents('.control-btns').find('.stop').hide();
					bannerRolling = false;
					clearInterval(timerID);

					cmm++;
					if(cmm >= '3'){
						cmm = '0';
					}
					console.log(cmm);
					_this.eq(cmm).find('h5').trigger('mouseover');
				})

				//자동재생 함수
				var bannerTabStartRooling = function(){
					cmm++;
					if(cmm >= '3'){
						cmm = '0';
					}
					_this.eq(cmm).find('h5').trigger('mouseover');
				}
			});
		},
		

		/* ==================================================================
			input placeholder
		================================================================== */
		placeholder : function(){
			var input = $('.js-placeholder').next('input');
			var label = $('.js-placeholder');
			input.on({
				focus : function(){
					$(this).prev('.js-placeholder').css('visibility', 'hidden');
				},
				blur : function(){
					if ($(this).val() == '' && $(this).html() == '') {
						$(this).prev('.js-placeholder').css('visibility', 'visible');
					}
					else {
						$(this).prev('.js-placeholder').css('visibility', 'hidden');
					}
				},
				change : function(){
					if ($(this).val() == '' && $(this).html() == '') {
						$(this).prev('.js-placeholder').css('visibility', 'visible');
					}
					else {
						$(this).prev('.js-placeholder').css('visibility', 'hidden');
					}
				}
			}).blur();
			label.on('click', function(){
				$(this).css('visibility', 'hidden');
				$(this).next('input').focus();
			})
		},

		/* ==================================================================
			GNB
		================================================================== */
		gnbAction : function(){
			var dep1 = $('div.gnb').find('ul.dep1');
			var dep2 = $('ul.dep2', dep1);
			
			//1depth 메뉴
			dep1.find('>li').on('mouseenter', function(){
				$(this).addClass('over');
				$(this).find('div.dep2').show();
			});
			dep1.find('>li').on('mouseleave', function(){
				$(this).removeClass('over');
				$(this).find('div.dep2').hide();
			});
			
			dep1.find('>li>a').on('focus', function(){
				dep2.parents('div.dep2').hide();
				$(this).parents('li').addClass('over');
				$(this).next('div.dep2').show();
			});
			dep1.find('>li>a').on('blur', function(){
				var _this = $(this);
				setTimeout(function(){
					if(dep2.find("a:focus").length == 0){
						_this.parents('li').removeClass('over');
						_this.next('div.dep2').hide();
					}
				},0)
			});
			dep2.find('a').on('blur', function(){
				var _this = $(this);
				setTimeout(function(){
					if(dep2.find("a:focus").length == 0){
						_this.parents('div.dep2').parents('li').removeClass('over');
						_this.parents('li').find('div.dep2').hide();
					}
				},0)
			});
		},


		/* ==================================================================
			LNB
		================================================================== */
		lnbAction : function(){
			var dep1 = $('div.lnb').find('ul.dep1');
			var dep2 = $('ul.dep2', dep1);
			var dep3 = $('ul.dep3', dep2);
			
			//1depth 메뉴
			dep1.find('>li>a').on('click', function(){
				if($(this).next('div.dep2').css('display') != 'block'){
					dep2.parents('div.dep2').hide();
					dep3.parents('div.dep3').hide();
					$(this).next('div.dep2').show();
				}else{
					//$(this).next('div.dep2').hide();
				}
			});
			//2depth 메뉴
			dep2.find('>li>a').on('click', function(){
				if($(this).next('div.dep3').css('display') != 'block'){
					dep3.parents('div.dep3').hide();
					$(this).next('div.dep3').show();
				}else{
					//$(this).next('div.dep3').hide();
				}
			});

		},

		/* ==================================================================
			링크 레이어 보이기
		================================================================== */
		moreLayerToggle : function(){
			/*$('.js-more-wrap').find('.js-more-nav').on('click', function(){
				$('.js-more-link').not($(this).siblings('.js-more-link')).hide();
				if($(this).siblings('.js-more-link').css('display') != 'block'){
					$(this).siblings('.js-more-link').show();
				}else{
					$(this).siblings('.js-more-link').hide();
				}
			});

			$('.js-more-wrap').find('a').on('blur', function(){
				var _this = $(this).parents('.js-more-wrap');
				setTimeout(function(){
					if(_this.find('a:focus').length == 0){
						_this.find('.js-more-link').hide();
					}
				},0)
			});*/
			$('.js-more-wrap').find('.js-more-nav').on('mouseenter', function(){
				$(this).siblings('.js-more-link').show();
			});
			$('.js-more-wrap').on('mouseleave', function(){
				$(this).find('.js-more-link').hide();
			});
			$('.js-more-wrap').find('.js-more-nav').on('focus', function(){
				$(this).siblings('.js-more-link').show();
			});

			$('.js-more-wrap').find('a').on('blur', function(){
				var _this = $(this).parents('.js-more-wrap');
				setTimeout(function(){
					if(_this.find('a:focus').length == 0){
						_this.find('.js-more-link').hide();
					}
				},0)
			});
		},
		
		/* ==================================================================
		기간설정함수
		================================================================== */
		getCalculatedDate : function(iYear, iMonth, iDay, seperator){
			var gdCurDate = new Date() ;//현재 날짜 객체를 얻어옴.

			//현재 날짜에 날짜 계산.
			gdCurDate.setYear( gdCurDate.getFullYear() + iYear );
			gdCurDate.setMonth( gdCurDate.getMonth() + iMonth );
			gdCurDate.setDate( gdCurDate.getDate() + iDay );

			//실제 사용할 연, 월, 일 변수 받기.
			var giYear = gdCurDate.getFullYear();
			var giMonth = gdCurDate.getMonth()+1;
			var giDay = gdCurDate.getDate();

			//월, 일의 자릿수를 2자리로 맞춘다.
			giMonth = "0" + giMonth;
			giMonth = giMonth.substring(giMonth.length-2,giMonth.length);
			giDay   = "0" + giDay;
			giDay   = giDay.substring(giDay.length-2,giDay.length);
			
			//display 형태 맞추기.
			return giYear + seperator + giMonth + seperator +  giDay;
		},
		
		/* ==================================================================
		기간설정함수
		================================================================== */
		adjustDate : function(y,m,d,s){
			$("#from").val(bsUI.getCalculatedDate(y,m,d,s))
			$("#to").val(bsUI.getCalculatedDate(0,0,0,s))
		},
		
		
		
		/* ==================================================================
		문서로딩시 실행함수
		================================================================== */
		init : function(){
			_Class.gnbAction(); //GNB 함수
			_Class.lnbAction(); //LNB 함수
			_Class.moreLayerToggle(); //탑.푸터 더보기레이어 함수
			_Class.placeholder(); //input placeholder 함수
			_Class.tab(); //탭메뉴
			_Class.accordion(); //아코디언 목록
		}

	}
	return _Class;
})());

$(document).ready(function(){
	bsUI.init();
});

